<template>
    <u-popup :show="show" mode="center" @close="close()" :safeAreaInsetBottom="false">
        <view class="container">
            <view class="line-progress" v-if="!canvasShow">
                <u-line-progress :percentage="progressNum" activeColor="#FDAB19"></u-line-progress>
            </view>
            <image :src="path" mode="widthFix" class="canvas-box" :style="[{ opacity: canvasShow ? 1 : 0 }]"></image> 
            <l-painter :board="poster" isCanvasToTempFilePath @success="path = $event" hidden v-if="show" @done="done" @progress="progress" useCORS
                ref="painter" />
            
            <!-- path-type="http://wx.sdljk.com/upload/20240418/7e911eb5b5f0a5ff889979b1c180d326.png" -->
        </view>
        <view class="buts">长按图片保存</view>
    </u-popup>
</template>
<script>
    /**
     * PosterPopup 海报生成弹框 
     * 二次封装了插件市场组件 l-painter  https://ext.dcloud.net.cn/plugin?id=2389
     * @author liruilin
     * @method open(config) 打开画布
     * @method close 关闭画布
     */
    export default {
        data() {
            return {
                posterInfo: {
                    title: '',
                    image: '',
                    avatar: '',
                    nickName: '',
                    qrcode: ''
                },
                show: false,
                path: '',
                progressNum: 0,
                canvasShow: false
            };
        },
        watch: {
            posterInfo: {
                immediate: true,
                deep: true,
                handler(a) {

                }
            }
        },
        computed: {
            poster() {
                
                let { 
                    // 标题
                    title, 
                    // 图片
                    image, 
                    //头像
                    avatar,
                    // 昵称
                    nickName,

                    // 二维码地址
                    qrcode
                } = this.posterInfo
                
                // TODO test 
                // image = "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
                
                /**
                 * 以下配置类似虚拟dom树结构配置
                 * 请注意,以下尺寸单位是以画布为基准宽度得出的750rpx，不是以屏幕，也就是说在下配置设置750rpx是沾满画布，而不是屏幕
                 */
                
                return {
                    css: {
                        width: "750rpx",
                        // paddingBottom: "40rpx",
                        // background: "linear-gradient(,#000 0%, #ff5000 100%)"
                    },
                    // 
                    views: [{
                        css: {
                            // padding: "32rpx",
                            boxSizing: "border-box",
                            background: "#fff",
                            borderRadius: "16rpx",
                            width: "750rpx",
                            // boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
                        },
                        views: [
                            {
                                src: image,
                                type: "image",
                                css: {
                                    objectFit: "cover",
                                    objectPosition: "50% 50%",
                                    width: "750rpx",
                                    // height: "900rpx"
                                },
                            }, {
                                css: {
                                    // marginTop: "32rpx",
                                    color: "#000000",
                                    fontWeight: "bold",
                                    fontSize: "28rpx",
                                    lineHeight: "1em",
                                    marginTop: "30rpx",
                                    padding: "0 30rpx 40rpx 30rpx",
                                    display: 'flex'
                                },
                                views: [{
                                    text: "",
                                    type: "view",
                                    css: {
                                        flex: "1",
                                    },
                                    views: [
                                        {
                                            type: "view",
                                            css: {
                                                
                                            },
                                            views: [
                                                {
                                                    text: title,
                                                    type: "text",
                                                    css: {
                                                        verticalAlign: "bottom",
                                                        color: '#000000',
                                                        fontSize: "40rpx",
                                                        lineClamp: 1,
                                                    },
                                                }
                                            ]
                                        }, {
                                            text: "",
                                            type: "view",
                                            css: {
                                                verticalAlign: "bottom",
                                                marginTop: '15rpx',
                                            },
                                            views: [
                                                {
                                                    // 头像
                                                    src: avatar,
                                                    type: "image",
                                                    css: {
                                                        objectFit: "cover",
                                                        objectPosition: "50% 50%",
                                                        width: "60rpx",
                                                        height: "60rpx",
                                                        borderRadius: "30rpx",
                                                    }
                                                }, {
                                                    // 用户名
                                                    text: nickName,
                                                    type: "text",
                                                    css: {
                                                        verticalAlign: "middle",
                                                        fontSize: "28rpx",
                                                        marginLeft: "30rpx"
                                                    },
                                                }
                                            ]
                                        }
                                    ]
                                },{
                                    text: "",
                                    type: "view",
                                    css: {
                                        width: "128rpx",
                                        height: "128rpx",
                                    },
                                    views: [
                                         {
                                            text: qrcode,
                                            type: "qrcode",
                                            css: {
                                                marginTop: "10rpx",
                                                width: "128rpx",
                                                height: "128rpx",
                                                color: '#000000'
                                            },
                                        
                                        }
                                    ]
                                }],

                                type: "view"
                            }
                        ],
                        type: "view"
                    }]
                }
            }
        },
        onLoad() {

        },
        methods: {
            open(data) {
                Object.assign(this.posterInfo, data)
                this.show = !this.show
                this.canvasShow = false
                this.progressNum = 0
            },
            close() {
                this.show = !this.show
            },
            confirm() {
                // console.log(this.path,'path');
                this.$refs.painter.canvasToTempFilePathSync({
                    fileType: "jpg",
                    // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
                    pathType: 'url',
                    quality: 1,
                    success: (res) => {
                        // 非H5 保存到相册
                        // H5 提示用户长按图另存
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: function() {
                                console.log('save success');
                            }
                        });
                    },
                });
            },
            /**
             * 绘制进度
             */
            progress(e){
                this.progressNum = Math.floor(e * 100)
            },
            /**
             * 绘制成功
             */
            done(){
                this.$nextTick(() => {
                    this.canvasShow = true
                })
            }
        }

    };
</script>
<style lang="scss" scoped>
    v-deep .u-modal__content {
        margin: 0;
        padding: 0 !important;
    }

    .container{
        position: relative;
        background-color: #ffffff;
    }
    
    .line-progress{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: 400rpx;
    }

    .canvas-box{
        width: 600rpx;
        // height: initial;
    }
    
    .buts {
        text-align: center;
        margin-bottom: 20rpx;
        margin-top: 20rpx;
        // color: #;
    }
</style>